<template>
  <div>
      <div class="row" v-for="(item,index) in goodList" :key="index">
          <div class="row_img">
              <img :src="item.img" alt="">
          </div>
          <div class="roe_info">
              <p>商品名称：{{item.name}}</p>
              <p>商品单价：{{item.price}}￥</p>
              <button type="button" class="btn btn-danger" @click="insertCart(index)">添加购物车</button><br>
              <button type="button" class="btn btn-warning">立即购买</button>
          </div>
      </div>
      <button type="button" class="btn btn-info" @click="$router.push('/cart')" >购物车</button>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
export default {
  name: "MyappIndex",

  data() {
    return {
      goodList: [
        {
          id: 1,
          name: "SK2",
          price: 1590.0,
          num: 1,
          img:
            "http://img13.360buyimg.com/n7/jfs/t1/179804/21/2812/138861/60954151E09f754c1/9706cf7d3f82ce19.jpg",
          status: false,
        },
        {
          id: 2,
          name: "watch",
          price: 1799.9,
          num: 1,
          img:
            "http://img13.360buyimg.com/n7/jfs/t1/195549/7/1383/147340/609247adE3a47f0f5/bf2a9f6dbd18a0d5.jpg",
          status: false,
        },
        {
          id: 3,
          name: "前男友面膜",
          price: 1059.99,
          num: 1,
          img:
            "http://img14.360buyimg.com/n7/jfs/t1/181060/34/2821/163555/60954cddE1af45f9c/8f7e11f4fc884da8.jpg",
          status: false,
        },
        {
          id: 4,
          name: "ipad",
          price: 5799,
          num: 1,
          img:
            "http://img11.360buyimg.com/n7/jfs/t1/161452/24/15900/88869/6063ddfeE258a392b/008f0f5fdb2c4a42.jpg",
          status: false,
        },
      ],
    };
  },
computed:{
    ...mapGetters(['cartList'])
},
  mounted() {},

  methods: {
      ...mapActions(['addCart']),
      insertCart(index){
          let insertRow =  this.goodList[index]
        //   console.log(insertRow);
        //   console.log(this.cartList);
          this.addCart([insertRow,...this.cartList])
        //   this.$router.push('/cart')
      }
      
  },
};
</script>

<style lang="scss" scoped>
.row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 3px solid red;
}
.row_img img{
    width: 100px;
    height: 100px ;
}
</style>